<template>
  <div ref="home_page" class="home-page">
    <div class="page-box">
      <swiper :imgList="imgList"></swiper>
      <div class="all-products">
        <div class="product-container">
          <divide-img :divideimg="divideImg"></divide-img>
        </div>
        <div class="product-list-item-wrap">
          <div class="product-list-item-box product-list-hook" style="">
            <section class="product-item-container">
              <div class="product-item" v-for="(item,index) in goods" :key="index" @click.stop.prevent="showDetail(item.id)">
                <div class="item-image">
                  <div class="item-image-img">
                    <img :src="item.thumb" v-lazy="item.thumb">
                  </div>
                </div>
                <div class="item-detail">
                  <div class="item-title">
                    <div class="product-item-title">
                      <p class="sub-title">{{item.title}}</p>
                      <p class="mess-title">{{item.subtitle}}</p>
                    </div>
                  </div>
                  <div class="item-tag">
                    <div class="product-item-tag"></div>
                  </div>
                  <div class="item-price">
                    <div class="product-item-price">
                      <div class="price-box" style="color: rgb(255, 72, 145);">
                        <span class="sign">￥</span>
                        <span class="price">{{item.price}}</span>
                      </div>
                    </div>
                  </div>
                  <!-- cartcontrol -->
                  <cart-control :id='item.id'></cart-control>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
    <footer-tab :iscur="tabView"></footer-tab>
  </div>
</template>

<script>
import Vue from 'vue'
import BScroll from 'better-scroll'
import store from '@/store/store'
import { Button, Lazyload } from 'vant'
import FooterTab from '#/footer/footer'
import Swiper from '#/swiper/swiper'
import DivideImg from '#/divide/divide'
import cartControl from '#/cartcontrol/cartcontrol'
import {CODE, APIURI} from '#/common/js/apiConst'
Vue.use(Button).use(Lazyload)

export default {
  store,
  data: () => {
    return {
      imgList: [
        {
          img:
            'https://j-image.missfresh.cn/img_20180305115841007.jpg?iopcmd=thumbnail&type=4&width=640',
          alt: '',
          link: ''
        },
        {
          img:
            'https://j-image.missfresh.cn/img_20180305202532982.jpg?iopcmd=thumbnail&type=4&width=640',
          alt: '',
          link: ''
        },
        {
          img:
            'https://j-image.missfresh.cn/img_20180305000505910.jpg?iopcmd=thumbnail&type=4&width=640',
          alt: '',
          link: ''
        },
        {
          img:
            'https://j-image.missfresh.cn/img_20180302115918533.jpg?iopcmd=thumbnail&type=4&width=640',
          alt: '',
          link: ''
        }
      ],
      tabView: 'recommend',
      divideImg: require('./recommend_tab.jpg'),
      goods: []
    }
  },
  components: {
    FooterTab,
    Swiper,
    DivideImg,
    cartControl
  },
  created() {
    this.$axios
      .get(APIURI + '/product/1')
      .then(res => {
        // console.log(res)
        res = res.data
        if (res.code === CODE) {
          this.goods = res.data.list
          // DOM更新后
          this.$nextTick(() => {
            this._initScroll()
          })
        }
      })
      .catch(function(err) {
        console.log(err)
      })
  },
  methods: {
    _initScroll() {
      if (!this.goodsScroll) {
        this.goodsScroll = new BScroll(this.$refs.home_page, {
          probeType: 3,
          scrollY: true,
          click: true
        })
      } else {
        this.goodsScroll.refresh()
      }
    },
    showDetail(id) {
      this.$router.push({ path: '/detail?id=' + id })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../common/scss/common.scss';
.home-page {
  background: $bgColor;
  box-sizing: border-box;
  overflow: hidden;
  height: 100vh;
  .product-list-item-wrap {
    background-color: $bgColor;
    padding-bottom: 50px;
    .product-list-item-box {
      background-color: $white;
      padding: 0;
      width: 100%;
      box-sizing: border-box;
    }
    .product-item {
      position: relative;
      background-color: $white;
      background-color: #fff;
      display: flex;
      flex-direction: row;
      position: relative;
      border: none;
      border-color: #f5f5f5;
      padding-top: 15px;
      padding-bottom: 18px;
      border-bottom: 1px solid #f5f5f5;
      .item-image {
        margin: 0 15px 0 20px;
        width: auto;
        height: auto;
        position: relative;
        flex: 0 0 auto;
        .item-image-img {
          display: block;
          border-radius: 0;
          width: 110px;
          height: 110px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .item-detail {
        flex: 1 1 0;
        text-align: left;
        margin: 0;
        color: #262626;
        .sub-title {
          margin: 0;
          font-size: 16px;
          padding-top: 10px;
          width: 200px;
          @include ellipsesOne();
          letter-spacing: -1px;
          color: #474245;
        }
        .mess-title {
          margin: 0;
          font-size: 14px;
          color: #969696;
          line-height: 26px;
          width: 200px;
          @include ellipsesOne();
        }
        .product-item-tag {
          line-height: 17px;
          height: 19px;
        }
        .item-price {
          padding-top: 15px;
          .price-box {
            font-size: 0;
          }
          .sign {
            font-size: 12px;
            letter-spacing: -3px;
          }
          .price {
            font-size: 16px;
            letter-spacing: -1px;
            display: inline-block;
            height: 22px;
          }
        }
      }
    }
  }
}
</style>